<template>
    <van-image
      width="100%"
      height="500"
      fit="cover"
      :src="product.thumb_text"

    />

    <div class="detailbox">
      <h4>{{product.name}}</h4>
      <div class="price">
        价格：<em>￥</em>{{product.price}}
      </div>
    </div>
    
    <div class="allkbox"></div>
    
    <!-- 商品规格 -->
    <div class="info_choice">
      <!-- Sku 商品规格 -->
      <div class="commodity" @click="SkuShow=true">
        <div class="opt">
          <div class="title wanl-gray">选择</div>
          <div class="option">
            <div class="selected">
              <div>
                <span>尺码</span>
                <span>颜色</span>
              </div>
            </div>
          </div>
        </div>
        <div class="wanl-gray">
          <img src="/assets/images/go.png" />
        </div>
      </div>
      <!-- 服务 -->
      <div class="commodity" @click="TipShow = true">
        <div class="opt">
          <div class="title wanl-gray">服务</div>
          <div class="option">
            <div class="selected">
              <div>
                <span>7天无理由退款</span>
                <span>·</span>
                <span>24小时内发货</span>
                <span>·</span>
                <span>假一赔十</span>
              </div>
            </div>
          </div>
        </div>
        <div class="wanl-gray">
          <img src="/assets/images/go.png" />
        </div>
      </div>
    </div>

    <div class="allkbox"></div>

    <!-- 选项卡 -->
    <van-tabs v-model:active="TabActive" type="card" color="#EE0A24">
      <van-tab title="产品参数">
        <div style="text-align: center;" v-html="product.content"></div>
      </van-tab>
      <van-tab title="商品评价">
        <div class="rate" style="overflow-x: hidden;">
          <div class="rate-header">
            <div class="rate-score">
              <h4>与描述相符</h4>
              <strong>4.5</strong>
            </div>
            <div class="rate-graph">
              <van-rate v-model="rate" allow-half readonly />
            </div>
          </div>

          <div class="rate-content">
            <div v-if="comment.length > 0">
              <div class="review-box" v-for="(item,key) in comment" :key="key">
                <div class="review-item">
                  <!-- 评论人 -->
                  <div class="from-whom">
                    <div class="avatar">
                      <img :src="item.business.avatar_text" />
                    </div>
                    <div class="name">{{ item.business.nickname }}</div>
                  </div>

                  <!-- 评论内容 -->
                  <div class="review-details">
                    <div class="content">{{item.comment}}</div>
                    <!-- <div>
                        <img src="/assets/images/avatar.png" />
                    </div> -->
                    <div class="time">{{item.comtime_text}}</div>
                    <van-rate v-model="item.rate" readonly />
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="rate-empty">该商品还没有人写评价呢</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 协议条款 -->
    <van-action-sheet v-model:show="TipShow" title="协议条款">
      <div class="ProductTip">
        三、我们如何使用信息 <br />
        四、我们如何共享信息<br />
        五、我们如何转让信息<br />
        六、我们如何公开披露信息<br />
        七、一般储存期限<br />
        八、我们如何确保您的信息安全<br />
        九、您能做什么<br />
        十、我们如何处理未成年人的个人信息<br />
        十一、您的个人信息的存储地点<br />
        十二、本隐私权政策不适用的范围<br />
        十三、本隐私权政策如何更新<br />
        十四、联系我们<br />
      </div>
    </van-action-sheet>

    <!-- 底部导航栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon :badge="product.cart" v-if="product.cart" icon="cart-o" @click="ToCart" text="购物车" />
      <van-action-bar-icon v-else icon="cart-o" @click="ToCart" text="购物车" />
    
      <van-action-bar-icon @click="collection" v-if="product.collection" icon="star" text="已收藏" color="#ff5000"/>
      <van-action-bar-icon @click="collection"  v-else icon="star-o" text="收藏" />
      <van-action-bar-button type="danger" text="立即购买"  @click="SkuShow=true"/>
    </van-action-bar>

    <!-- SKU -->
    <van-sku
        ref="SkuRef"
        v-model="SkuShow"
        :sku="sku"
        :properties="properties"
        :goods="goods"
        :goods-id="product.id"
        @add-cart="AddCart"
        @buy-clicked="Buy"
    />
</template>

<script setup>
// @buy-clicked="Buy"
    import { onMounted } from 'vue';
    import VanSku from 'vant-sku';
    import 'vant-sku/dist/index.css'

    const {proxy} = getCurrentInstance()
    let business = proxy.$business
    let proid = proxy.$route.query.proid ? proxy.$route.query.proid : 0
    // console.log(proid)

    //商品详情
    let comment = ref([])
    let product = ref({})

    //选项卡
    let TabActive = ref(0)
    let rate = ref(4.5)

    //条款服务
    let TipShow = ref(false)

    //Sku
    let SkuShow = ref(false)
    let sku = ref({})
    let properties = ref([])
    let goods = ref({})
    let SkuRef = ref({})


    onMounted(() =>{
        ProductInfo()
    })

    var datas = {
        proid:proid,
        busid:business.value.id,
    }

    const ProductInfo = async () => {
        var result = await proxy.$POST({
            url:'/product/info',
            params: datas
        })

        if(result.code == 0)
        {
            proxy.$fail({
                message: result.msg,
                duration:1000,
                onClose: ()=>proxy.$router.go(-1),
            })
            return false
        }
        

        comment.value = result.data.comment
        product.value = result.data.product

        comment.value.map((item) => item.rate = parseInt(item.rate))

        //sku
        let SkuData = result.data.sku
        let propertiesData = result.data.properties

        // console.log(SkuData)
        // return false
        
        goods.value = {picture: product.value.thumb_text}
        sku.value = SkuData
        // //将对象转化为数组
        properties.value = Object.values(propertiesData)



        // console.log(comment.value)
        // return false
    }

    const collection = async () => {
        //判断是否登录
        if(!business.value.id)
        {
            return '请先登录';
        }

        var params =
        {
            busid: business.value.id,
            collectid:proid
        }

        var result = await proxy.$POST({
            url:'/product/collection',
            params
        })
        // console.log(result)
        // return false    
        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        product.value.collection = result.data.action == 'action' ? true : false

        // console.log(product.value.collection)

    }

    //添加购物车
    const AddCart = async (SkuData) => {
        //判断是否登录
        if(!business.value.id)
        {
            proxy.$fail('请先登录')
            return false
        }

        //判断是否选择规格
        if(properties.value.length > 0 && !SkuData.selectedSkuComb)
        {
            proxy.$fail('请选择规格');
            return false
        }
        // console.log(SkuData.selectedSkuComb)

        //购买数量
        var selectedNum = SkuData.selectedNum
        if(selectedNum <= 0)
        {
            proxy.$fail('购买数量不能小于0')
            return false
        }
        // console.log(selectedNum)
        var relationids = []

        //有规格
        if(properties.value.length > 0)
        {
            var SkuProps = SkuData.selectedSkuComb.properties

            for(var item of SkuProps)
            {
                var id = item.v[0] ? item.v[0]['id'] : 0
                if(id) relationids.push(id)
            }
        }

        //组装数据
        var params = {
            busid: business.value.id,
            proid: proid,
            nums: selectedNum,
            relationids: relationids.join(','), //规格id
        }

        //隐藏弹出框
        SkuShow.value = false

        var result = await proxy.$POST({
            url:'/cart/add',
            params
        })

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        proxy.$success(result.msg)

        product.value.cart = result.data
        // console.log(product.value.cart)

    }

    //立即购买
    const Buy = async (SkuData) =>
    {
        console.log('立即购买')
        console.log(SkuData)
    } 

    const ToCart = async () => {
        proxy.$router.push('/cart')
    }



</script>

<style scoped>
@import url('/assets/css/ProductInfo.css');
</style>